<template>
  <div class="box">
    <div ref="swiper" class="swiper" v-if="index >= min && index < max" v-for="(item,index) in data" :key="index"
         @click="showDetail(index)">
      <img :src="item.xp ? `${BASE64_TYPE}${item.xp}` : '/static/default/head.png'" alt="" class="swiper-img">
      <p class="swiper-p"><span>{{item.xm}}</span></p>
      <span class="swipe-tip">{{item.times}}次</span>
    </div>
    <div class="arr">
      <span class="left icon iconfont icon-aleft" @click="left"></span>
      <span class="right icon iconfont icon-dextrad" @click="right"></span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'swiper',
    components: {},
    props: {
      icon: '',
      data: {
        type: Array,
        default() {
          return []
        }
      }
    },
    mixins: [],
    computed: {},
    data() {
      return {
        min: 0,
        max: 4,
        dcbs: []
      }
    },
    methods: {
      left() {
        if (this.min <= 0) {
          this.min = 0
          this.max = 4
        } else {
          this.min--
          this.max--
        }
      },
      right() {
        if (this.max < this.data.length) {
          this.max++
          this.min++
        } else {
          this.max = this.data.length
          this.min = this.max - 4
        }
      },
      showDetail(index) {
        this.$emit('getImgIndex', index)
        this.$router.push('accompany')
      }
    },
    filters: {},
    mounted() {
    },
    created() {
    }
  }
</script>
<style scoped>
  .box {
    display: flex;
    margin: 0 1.5rem;
  }

  .swiper {
    display: inline-block;
    position: relative;
    overflow: hidden;
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
    margin:0 .5rem;
  }

  .swiper-img {
    width: 100%;
  }

  .swiper-p {
    line-height: 25px;
    position: absolute;
    bottom: 7%;
    left: 0;
    width: 100%;
    height: 25px;
    margin: 0;
    font-size: .8rem;
    text-align: center;
    opacity: .5;
    background-color: #000000;
  }

  .swiper-p span {
    position: relative;
    color: #FFFFFF;

  }

  .swipe-tip {
    position: absolute;
    top: 0%;
    right: 0%;
    background-color: #FF6600;
    padding: .1rem .5rem;
    color: #FFFFFF;
    text-align: center;
  }

  .box {
    position: relative;
  }

  .arr span {
    position: absolute;
    left: -5%;
    bottom: 40%;
    cursor: pointer;
    font-size: 1.5rem;
    color: #333;
  }

  .arr .right {
    right: -5%;
    left: auto;
  }
</style>
